<template>
	<div class="priceDetail">
		<div class="priceDetail_title">业绩数据</div>
		<div>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">个人积分：</span>
				<span class="priceDetail_item_val">200</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">月紧缩积分：</span>
				<span class="priceDetail_item_val">411</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">月小组积分：</span>
				<span class="priceDetail_item_val">259</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">小组累积分：</span>
				<span class="priceDetail_item_val">50200</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">不活跃分：</span>
				<span class="priceDetail_item_val">0</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">当月级别：</span>
				<span class="priceDetail_item_val">9</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">最高级别：</span>
				<span class="priceDetail_item_val">9</span>
			</span>
		</div>
		<div class="priceDetail_title">团队统计</div>
		<div>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">活跃人数：</span>
				<span class="priceDetail_item_val">257</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">五星人数：</span>
				<span class="priceDetail_item_val">214</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">活跃五星人数：</span>
				<span class="priceDetail_item_val">91</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">金钻人数：</span>
				<span class="priceDetail_item_val">9</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">合格部门数：</span>
				<span class="priceDetail_item_val">12</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">当月新人数：</span>
				<span class="priceDetail_item_val">11</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">优惠顾客数：</span>
				<span class="priceDetail_item_val">11</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">总人数：</span>
				<span class="priceDetail_item_val">7634</span>
			</span>
			
		</div>
		<div class="priceDetail_title">奖金明细</div>
		<div>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">持续进步奖：</span>
				<span class="priceDetail_item_val">10000</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">年度钻石/金钻特别奖：</span>
				<span class="priceDetail_item_val">10000</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">四代0.1：</span>
				<span class="priceDetail_item_val">0.00</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">红宝奖金：</span>
				<span class="priceDetail_item_val">19004.35</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">翡翠奖金：</span>
				<span class="priceDetail_item_val">17669.12</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">钻石奖金：</span>
				<span class="priceDetail_item_val">7572.48</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">金钻奖金：</span>
				<span class="priceDetail_item_val">2524.16</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">平级奖金：</span>
				<span class="priceDetail_item_val">4778.30</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">特别奖：</span>
				<span class="priceDetail_item_val">0.00</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">管理费：</span>
				<span class="priceDetail_item_val">-360</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">0.3%奖：</span>
				<span class="priceDetail_item_val">0.00</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">符合7条20万平级奖：</span>
				<span class="priceDetail_item_val">0.00</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">符合7条50万平级奖：</span>
				<span class="priceDetail_item_val">0.00</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">符合7条100万平级奖：</span>
				<span class="priceDetail_item_val">0.00</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">三钻奖金（加权）：</span>
				<span class="priceDetail_item_val">0.00</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">三钻奖金（平均）：</span>
				<span class="priceDetail_item_val">0.00</span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">顾客级差奖：</span>
				<span class="priceDetail_item_val">31.08<span class="priceDetail_btn" @click="showMemberTable = true">查明细</span></span>
			</span>
			<span class="priceDetail_item">
				<span class="priceDetail_item_word">直销员级差奖：</span>
				<span class="priceDetail_item_val">28<span class="priceDetail_btn" @click="showZxyTable = true">查明细</span></span>
			</span>
		</div>
		<!-- 表格弹窗 -->
		<el-dialog title="直销员级差奖查询" :visible.sync="showZxyTable">
		  <el-table :data="zxyTable" :summary-method="getSummaries" show-summary>
		    <el-table-column property="memberNum" label="顾客编号" width="150"></el-table-column>
		    <el-table-column property="memberName" label="顾客姓名" width="200"></el-table-column>
		    <el-table-column property="PV" label="PV"></el-table-column>
		    <el-table-column property="ratio" label="比例"></el-table-column>
		    <el-table-column property="range" label="级差"></el-table-column>
		  </el-table>
		</el-dialog>
		<el-dialog title="顾客级差奖查询" :visible.sync="showMemberTable">
		  <div class="showMemberTableItem">顾客级差奖：24.00</div>
		  <div class="showMemberTableItem">30%奖：12.00</div>
		  <div class="showMemberTableItem">当场折扣：0.00</div>
		  <div class="showMemberTableItem">应发30%奖：12.00</div>
		  <div class="showMemberTableItem">应发顾客级差奖：24.00</div>
		  <div>
		  	<div class="showMemberTableTitle">备注：</div>
		  	<div class="showMemberTableWord">应发30%奖：如果顾客级差奖>当场折扣，则为：30%奖，否则为：顾客级差奖+30%奖-当场折扣</div>
		  	<div class="showMemberTableWord">应发顾客级差奖：如果顾客级差奖>当场折扣，则为：顾客级差奖-当场折扣，否则为：0</div>
		  </div>
		  <el-table :data="memberTable">
		    <el-table-column property="memberNum" label="顾客编号" width="150"></el-table-column>
		    <el-table-column property="memberName" label="顾客姓名" width="200"></el-table-column>
		    <el-table-column property="rangePrice" label="级差奖金"></el-table-column>
		  </el-table>
		</el-dialog>
		<el-dialog title="持续进步奖查询" :visible.sync="showProgressDialog" @close="hideProgressMsg">
		  <div>
		  	<el-date-picker
		      v-model="time"
		      type="month"
		      placeholder="选择月">
		    </el-date-picker>
		    至
		  	<el-date-picker
		      v-model="time2"
		      type="month"
		      placeholder="选择月">
		    </el-date-picker>
		    <el-button type="primary" @click="inquireProgressMsg">查询</el-button>
		  </div>
		  <el-table :data="progressTable" v-show="showProgressTable" :summary-method="getSummaries" show-summary>
		    <el-table-column property="month" label="月份" width="150"></el-table-column>
		    <el-table-column property="memberNum" label="顾客编号" width="200"></el-table-column>
		    <el-table-column property="memberName" label="顾客姓名"></el-table-column>
		    <el-table-column property="creditNum" label="信誉指数"></el-table-column>
		    <el-table-column property="score" label="分值"></el-table-column>
		  </el-table>
		</el-dialog>
	</div>
</template>
<script>
export default{
	data(){
		return {
			// 时间
			time:"",
			time2:"",
			zxyTable: [{
	          memberNum: '36599406',
	          memberName: '王小虎',
	          PV: '1518',
	          ratio:"0.06",
	          range:"94.26"
	        }, {
	          memberNum: '53599406',
	          memberName: '李文',
	          PV: '2718',
	          ratio:"0.1",
	          range:"111.26"
	        }, {
	          memberNum: '24999406',
	          memberName: '黄笃',
	          PV: '1238',
	          ratio:"0.23",
	          range:"64.26"
	        }, ],
	        showZxyTable: false,
	        memberTable: [{
	          memberNum: '00001118',
	          memberName: '李丽',
	          rangePrice:"25.00"
	        }, {
	          memberNum: '00001118',
	          memberName: '李丽',
	          rangePrice:"52.00"
	        }, {
	          memberNum: '00001118',
	          memberName: '李丽',
	          rangePrice:"75.34"
	        }, {
	          memberNum: '36599406',
	          memberName: '王小虎',
	          rangePrice:"25.00"
	        }, {
	          memberNum: '12549406',
	          memberName: '李伟',
	          rangePrice:"568.12"
	        },{
	          memberNum: '38749406',
	          memberName: '张坤',
	          rangePrice:"635.25"
	        }, ],
	        showMemberTable: false,
	        progressTable:[{
	        	month:"2018.03",
	        	memberNum:36678442,
	        	memberName:"李丽",
	        	creditNum:7,
	        	score:12
	        },{
	        	month:"2018.03",
	        	memberNum:36678442,
	        	memberName:"李丽",
	        	creditNum:8,
	        	score:10
	        },{
	        	month:"2018.03",
	        	memberNum:36678442,
	        	memberName:"李丽",
	        	creditNum:9,
	        	score:13
	        },{
	        	month:"2018.04",
	        	memberNum:36678442,
	        	memberName:"李丽",
	        	creditNum:9,
	        	score:13
	        },{
	        	month:"2018.04",
	        	memberNum:36678442,
	        	memberName:"李丽",
	        	creditNum:7,
	        	score:7
	        },{
	        	month:"2018.05",
	        	memberNum:36678442,
	        	memberName:"李丽",
	        	creditNum:8,
	        	score:6
	        },{
	        	month:"2018.05",
	        	memberNum:36678442,
	        	memberName:"李丽",
	        	creditNum:8,
	        	score:4
	        }],
	        showProgressDialog:false,
	        showProgressTable:false
			}
	},
	methods:{
		// 查询持续进步奖
		inquireProgressMsg(){
			this.showProgressTable = true
		},
		hideProgressMsg(){
			this.showProgressTable = false
		},
		// 总计
		getSummaries(param) {
	        const { columns, data } = param;
	        const sums = [];
	        columns.forEach((column, index) => {
	          if (index === 3) {
	            sums[index] = '总计';
	            return;
	          }
	          const values = data.map(item => Number(item[column.property]));
	          if(index == 4){
		          if (!values.every(value => isNaN(value))) {
		            sums[index] = values.reduce((prev, curr) => {
		              const value = Number(curr);
		              if (!isNaN(value)) {
		                return (prev*1000 + curr*1000)/1000;
		              } else {
		                return prev;
		              }
		            }, 0);
		          }
	          }
	        });

	        return sums;
	      }
	}
}
</script>
<style scoped>
.priceDetail_item{
	display: inline-block;
	width: 24%;
	margin-top: 15px;
	vertical-align: top
}
.priceDetail_item_word{
	display: inline-block;
	width: 48%;
	color:#5B85AA;
	vertical-align: top
}
.priceDetail_item_val{
	display: inline-block;
	width: 48%;
	vertical-align: top
}
.priceDetail_title{
	font-size: 20px;
	font-weight: bold;
	margin-top: 30px
}
.priceDetail_title_red{
	color:red;
}
.priceDetail_btn{
	color:#3f9ffe;
	margin-left: 10px;
	cursor: pointer
}
.showMemberTableItem{
	display: inline-block;
	width: 30%;
	font-size: 16px;
	margin-bottom: 5px;
}
.showMemberTableTitle{
	color:blue;
	font-size: 18px;
}
.showMemberTableWord{
	color:#ee0026 ;
}
</style>